import React from 'react';
import { Outlet, useSearchParams } from 'react-router-dom';
import { useSettingActions, useSettings } from '../../store/settingStore';
import Header from './Header';
import { useMenuActions } from '../../store/menuStore';
import { useQuery } from '@tanstack/react-query';
import { CircleLoading } from '@/components/loading';
import ProgressBar from '@/components/progress-bar';

const DashboardLayout = (props) => {
  const [searchParams] = useSearchParams();
  const { showRightSidebar } = useSettings()

  const settings = useSettings();
  const { setSettings } = useSettingActions()
  const { getDashboardMenus, findByCodeMenu, selectedByCode, setMenuReady } = useMenuActions()

  let { data: menus, isPending } = useQuery({
    queryKey: ["getDashboardMenus"],
    queryFn: () => getDashboardMenus(),
  })

  const sliderOpen = () => {
    setSettings({
      ...settings,
      showRightSidebar: true
    })
  }

  const findFirstChild = (data) => {
    if (data.children && data.children[0]) {
      return findFirstChild(data.children[0])
    } else {
      return data
    }
  }

  // useEffect(() => {
  //   if (menus) {
  //     let activeMenu;
  //     if (searchParams.get('menuCode')) {
  //       activeMenu = findByCodeMenu(searchParams.get('menuCode'))
  //     } else if (!searchParams.get('menuUrl') && menus[0]) {
  //       activeMenu = findFirstChild(menus[0])
  //     }
  //     if (activeMenu) {
  //       selectedByCode(activeMenu)
  //     }

  //     setMenuReady(true)
  //   }
  // }, [menus])


  if (isPending) {
    return <CircleLoading />
  }

  return (
    <div id="dashboard-layout-wrapper">
      <ProgressBar />
      <Header />
      <main className="layout-content" >{props.children}</main>
    </div>
  );
};

export default DashboardLayout;
